import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Typography, Spin, Tag, Statistic } from 'antd';
import { DollarOutlined, RiseOutlined, FallOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const StockInfo = ({ symbol }) => {
  const [stockData, setStockData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchStockInfo = async () => {
      try {
        const response = await fetch(`/api/stock/${symbol}`);
        const data = await response.json();
        setStockData(data);
      } catch (error) {
        console.error('获取股票信息失败:', error);
      } finally {
        setLoading(false);
      }
    };

    if (symbol) {
      fetchStockInfo();
    }
  }, [symbol]);

  if (loading) {
    return (
      <Card>
        <div className="loading-container">
          <Spin size="large" />
          <p>加载股票信息中...</p>
        </div>
      </Card>
    );
  }

  if (!stockData) {
    return (
      <Card>
        <div style={{ textAlign: 'center', padding: '50px' }}>
          <Text type="danger">无法获取股票信息</Text>
        </div>
      </Card>
    );
  }

  const change = stockData.current_price - stockData.previous_close;
  const changePercent = stockData.previous_close > 0 ? (change / stockData.previous_close * 100) : 0;
  const isPositive = change >= 0;

  return (
    <div>
      <Card style={{ marginBottom: '20px' }}>
        <Row align="middle" justify="space-between">
          <Col>
            <Title level={3}>{stockData.name}</Title>
            <Text type="secondary">{stockData.symbol}</Text>
          </Col>
          <Col style={{ textAlign: 'right' }}>
            <Title level={2}>
              {stockData.currency} {stockData.current_price?.toFixed(2)}
            </Title>
            <Tag color={isPositive ? 'green' : 'red'}>
              {isPositive ? <RiseOutlined /> : <FallOutlined />}
              {' '}{isPositive ? '+' : ''}{change?.toFixed(2)} ({isPositive ? '+' : ''}{changePercent?.toFixed(2)}%)
            </Tag>
          </Col>
        </Row>
      </Card>

      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="今日开盘"
              value={stockData.open}
              precision={2}
              prefix={stockData.currency}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="今日最高"
              value={stockData.day_high}
              precision={2}
              prefix={stockData.currency}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="今日最低"
              value={stockData.day_low}
              precision={2}
              prefix={stockData.currency}
              valueStyle={{ color: '#f5222d' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="成交量"
              value={stockData.volume}
              precision={0}
              formatter={(value) => {
                if (value >= 1000000) {
                  return `${(value / 1000000).toFixed(1)}M`;
                } else if (value >= 1000) {
                  return `${(value / 1000).toFixed(1)}K`;
                }
                return value;
              }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="市值"
              value={stockData.market_cap}
              precision={0}
              formatter={(value) => {
                if (value >= 1000000000000) {
                  return `$${(value / 1000000000000).toFixed(1)}T`;
                } else if (value >= 1000000000) {
                  return `$${(value / 1000000000).toFixed(1)}B`;
                } else if (value >= 1000000) {
                  return `$${(value / 1000000).toFixed(1)}M`;
                }
                return `$${value}`;
              }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="前收盘价"
              value={stockData.previous_close}
              precision={2}
              prefix={stockData.currency}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default StockInfo;
